<template>
  <div class="warp">
    <div class="title-bar">
      <img class="icon" :src="iconDevice" />
      <div class="title">告警信息</div>
    </div>
    <div class="content">
      <!-- 统计报警次数 -->
      <div class="alarm-conut">
        <div class="alarm-true">
          <span class="num">{{detail.zsbjCount}}</span>
          <div class="progress">
            <div class="side"></div>
            <div class="middle">
              <div class="rate" :style="{height: trueHeight + '%'}">
                <div class="wave"></div>
              </div>
            </div>
            <div class="side"></div>
          </div>
          <span class="text">真实报警次数</span>
        </div>
        <div class="alarm-false">
          <span class="num">{{detail.wbjCount}}</span>
          <div class="progress">
            <div class="side"></div>
            <div class="middle">
              <div class="rate" :style="{height: falseHeight + '%'}">
                <div class="wave"></div>
              </div>
            </div>
            <div class="side"></div>
          </div>
          <span class="text">误报警次数</span>
        </div>
      </div>
      <!-- 告警状态占比 -->
      <div class="alarm-status">
        <div class="title"><span>告警状态占比</span></div>
        <div class="echart-alarm">
          <div id="myEchart"></div>
          <div class="total">
            <div>
              <span>{{detail.zsbj}}</span>
              <span>真实报警次数</span>
            </div>
            <div>
              <span>{{detail.wbj}}</span>
              <span>误报警次数</span>
            </div>
          </div>
        </div>
      </div>
      <div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      iconDevice: require('../../assets/images/jialey/icon/alarm-info.png'),
      trueHeight: 0, // 真实报警次
      falseHeight: 0, // 误报警次
      detail: {},
      chart: null
    }
  },
  mounted () {
    this.handleGetAlarms()
  },
  methods: {
    handleGetAlarms () {
      const url = this.$base.getUrl('jiaAlarmInfo')
      const params = {
        url: url,
        data: {
          'areaId': this.$route.params.deptId
        }
      }
      this.$store.dispatch('getForm', params).then(res => {
        this.detail = res
        this.trueHeight = res.zsbj.replace('%', '') - 20
        this.falseHeight = res.wbj.replace('%', '') - 20
        this.initEchart()
      })
    },
    initEchart () {
      let option = {
        tooltip: {
          show: true,
          trigger: 'item'
          // formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            type: 'pie',
            radius: ['70%', '100%'],
            labelLine: {
              normal: {
                show: false
              }
            },
            avoidLabelOverlap: false,
            // silent: true,
            label: {
              normal: {
                show: true,
                position: 'center',
                formatter: function (argument) {
                  let html = `告警\n占比`
                  return html
                },
                textStyle: {
                  fontSize: 16,
                  color: '#96BAFA'
                },
                per: {
                  color: '#eee',
                  backgroundColor: '#334455',
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 4,
                borderColor: '#2B3648'
              }
            },
            hoverAnimation: false,
            center: ['50%', '50%'],
            data: [
              {
                name: '误报警次数',
                value: this.detail.wbjCount,
                itemStyle: {
                  color: '#B7E986'
                }
              },
              {
                name: '真实报警次数',
                value: this.detail.zsbjCount,
                itemStyle: {
                  color: '#0099FF'
                }
              }
            ]
          }
        ]
      }

      this.chart = this.$echarts.init(document.getElementById('myEchart'))
      this.chart.setOption(option, true)
    }
  }
}
</script>
<style lang="less" scoped>
.warp {
  .title-bar {
    padding-bottom: 10px;
    border-bottom: 1px solid #465775;
    > div {
      display: inline-block;
    }
    .icon {
      vertical-align: text-top;
      margin-right: 10px;
    }
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }
  }
}

.content {
  margin-top: 10px;
  box-sizing: border-box;
  padding: 0 6px;
  .alarm-conut {
    display: flex;
    justify-content: space-between;
    color: #fff;
    text-align: center;
    .progress {
      width: 64px;
      height: 100px;
      box-sizing: border-box;
      margin: 6px auto 10px;
      > div {
        display: inline-block;
      }
      .middle {
        position: relative;
        margin: 0 6px;
        width: 50px;
        height: 100%;
        background: rgba(0, 139, 232, 0.3);
        overflow: hidden;
        .rate {
          position: absolute;
          bottom: 0;
          width: 100%;
          background: rgba(0, 139, 232, 1);
        }
      }
      .side {
        position: relative;
        width: 1px;
        height: 100px;
        background: rgba(0, 139, 232, 0.3);
        &::before,
        &::after {
          content: ' ';
          display: block;
          width: 1px;
          height: 10px;
          background: #008be8;
          position: absolute;
        }
        &::after {
          bottom: 0;
        }
      }
    }
    .num {
      font-size: 24px;
    }
    .alarm-true {
      .num {
        color: #008be8;
      }
    }
    .alarm-false {
      .num {
        color: #b7e986;
      }
      .middle {
        background: rgba(183, 233, 134, 0.3);
        .rate {
          background-color: rgba(183, 233, 134, 1);
        }
      }
      .side {
        background: rgba(183, 233, 134, 0.3);
        &::before,
        &::after {
          background: #b7e986;
        }
      }
      .wave {
        &::before {
          background-color: rgba(183, 233, 134, 1);
        }
        &::after {
          background-color: rgba(183, 233, 134, 0.6);
        }
      }
    }
  }
  .alarm-status {
    .title {
      margin: 27px auto;
      width: 244px;
      height: 1px;
      background: #465775;
      position: relative;
      span {
        position: absolute;
        top: -10px;
        left: 50%;
        margin-left: -42px;
        padding: 0 5px;
        display: block;
        width: 84px;
        height: 20px;
        font-size: 14px;
        text-align: left;
        color: #96bafa;
        background: rgba(43, 54, 72, 0.95);
      }
    }
    .echart-alarm {
      display: flex;
      justify-content: space-around;
      > div {
        color: #fff;
      }
      #myEchart {
        width: 126px;
        height: 126px;
      }
      .total {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        span {
          font-size: 14px;
          display: block;
          &:first-child {
            height: 24px;
            font-size: 20px;
            color: #0099ff;
            line-height: 24px;
          }
          &:last-child {
            &::before {
              content: '';
              display: inline-block;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: #0099ff;
              margin-left: -10px;
              margin-right: 5px;
            }
          }
        }
        > div {
          &:last-child {
            span {
              &:first-child {
                color: #b7e986;
              }
              &:last-child {
                &::before {
                  background: #b7e986;
                }
              }
            }
          }
        }
      }
    }
  }
}
.wave {
  position: absolute;
  top: -20px;
  width: 50px;
  height: 20px;
  overflow: hidden;

  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    bottom: -160px;
    left: 50%;
    background-color: rgba(0, 139, 232, 1);
    border-radius: 45%;
    transform: translate(-50%, -70%) rotate(0);
    animation: rotate 6s linear infinite;
    z-index: 10;
  }

  &::after {
    border-radius: 47%;
    background-color: rgba(0, 139, 232, 0.6);
    transform: translate(-50%, -70%) rotate(0);
    animation: rotate 10s linear -5s infinite;
    z-index: 20;
  }
}

@keyframes rotate {
  50% {
    transform: translate(-50%, -73%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -70%) rotate(360deg);
  }
}
</style>
